import React, { useEffect, useState } from "react";
import { Divider, Avatar } from "antd";
import styles from "./styles.module.less"; // 引入自定义的样式文件
import { getComment, addComment } from "@/utils/front/index";
import { useSelector } from "react-redux";

interface CommentProps {
  id?: string;
}

interface CommentData {
  commentsId: number;
  date: string;
  content: string;
  parentId: number;
  level: number;
  articleId: number;
  id: number;
  name: string;
  avatar: string;
  children: CommentData[];
}

const Comment: React.FC<CommentProps> = ({ id }) => {
  const [commentList, setCommentList] = useState<CommentData[]>([]);
  const getComments = async (id: any) => {
    if (id) {
      await getComment(id).then((res: any) => {
        setCommentList(res.data);
      });
    }
  };
  useEffect(() => {
    if (id) {
      getComments(id);
    }
  }, [id]);

  const [isReplying, setIsReplying] = useState(false);
  const [currId, setCurrId] = useState<number | null>(null);
  const { userInfo } = useSelector((state: any) => state.user);
  // console.log("userInfo", userInfo);
  // 一级评论
  const [topValue, setTopValue] = useState("");
  const addTopComments = async () => {
    const CommentData = {
      date: "2024-07-29 14:23",
      content: topValue,
      parentId: 0,
      level: 1,
      articleId: id,
      id: userInfo.id,
    };
    console.log(CommentData);
    await addComment(CommentData);
    getComments(id);
    setTopValue("");
    console.log("topValue", topValue);
  };
  // 其他评论
  const [value, setValue] = useState("");
  const addComments = async (comment: any) => {
    console.log(comment);
    const CommentData = {
      date: "2024-07-29 14:23",
      content: value,
      parentId: comment.commentsId,
      level: comment.level + 1,
      articleId: comment.articleId,
      id: userInfo.id,
    };
    console.log(CommentData);

    await addComment(CommentData);
    getComments(id);
    setValue("");
    console.log("value", value);
  };

  const renderComments = (comments: CommentData[]) => {
    return (
      <>
        {comments.map((comment) => (
          <div key={comment.commentsId} className={styles.comment}>
            <Divider />
            <div className={styles.comment_header}>
              <Avatar src={comment.avatar} alt={comment.name} />
              <span className={styles.name}>{comment.name}</span>
            </div>
            <div className={styles.comment_content}>
              <p>{comment.content}</p>
            </div>
            {/* {comment.children.length > 0 && (
              
            )} */}
            <div style={{ paddingLeft: "40px", marginTop: "20px" }}>
              <span className={styles.date}>{comment.date}</span>
              {comment.level === 1 && (
                <span
                  onClick={() => {
                    setIsReplying(true); // 设置正在回复状态为 true
                    setCurrId(comment.commentsId); // 设置当前回复的评论ID
                  }}
                  className={styles.replyLink} // 添加样式用于点击
                >
                  回复
                </span>
              )}

              {/* 回复框 */}
              {currId === comment.commentsId && isReplying && (
                <div
                  style={{
                    display: "grid",
                    gridTemplateColumns: "300px 100px",
                    marginTop: "10px", // 调整样式以适应布局
                  }}
                >
                  <input
                    style={{
                      height: "38px",
                      borderRadius: "5px",
                      margin: "2px",
                      backgroundColor: "aliceblue",
                      paddingLeft: "5px",
                    }}
                    type="text"
                    onChange={(e) => setValue(e.target.value)}
                    value={value}
                  />
                  <button
                    style={{ borderRadius: "10px", backgroundColor: "#3cdfa8" }}
                    onClick={() => addComments(comment)}
                  >
                    发送
                  </button>
                </div>
              )}
            </div>
            {comment.children.length > 0 && (
              <div className={styles.child_comments}>
                {renderComments(comment.children)}
              </div>
            )}
          </div>
        ))}
      </>
    );
  };

  return (
    <div className={styles.comments_container}>
      <Divider></Divider>
      <h2 className={styles.comments_title}>
        评论 <span style={{ fontSize: "16px", color: "#999" }}>1032</span>
      </h2>
      {/* 发布输入框 */}
      <div
        style={{
          display: "flex",
          width: "25vw",
          height: "50px",
          alignItems: "center",
          marginLeft: "40px",
        }}
      >
        <form>
          <label className={styles.label} htmlFor="search">
            Search
          </label>
          <input
            required
            pattern=".*\S.*"
            type="search"
            className={styles.input_2}
            id="search"
            value={topValue}
            onChange={(e) => setTopValue(e.target.value)}
          />
          <span className={styles.caret}></span>
        </form>
        <button className={styles.button}>
          <span className={styles.button_top} onClick={addTopComments}>
            发布
          </span>
        </button>
      </div>
      {commentList.length > 0 ? (
        renderComments(commentList)
      ) : (
        <div className={styles.no_comments}>暂无评论</div>
      )}
    </div>
  );
};

export default Comment;
